<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>黑马旅游-搜索</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/search.css">
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<div class="page_one">
    <div class="contant">
        <div class="crumbs">
            <img src="images/search.png" alt="">
            <p>黑马旅行><span>搜索结果</span></p>
        </div>
        <div class="xinxi clearfix">
            <div class="left">
                <div class="header">
                    <span>商品信息</span>
                    <span class="jg">价格</span>
                </div>
                <ul id="_route"><!--
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>299</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>浪花朵朵旅行普吉岛丛林飞跃空中飞人探险游中文服务泰国旅游</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>899</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>黑妞皇家旅行普吉岛攀牙湾大船星光之旅皮划艇日落休闲特色体验</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>999</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>浪花朵朵旅行普吉岛皇帝岛珊瑚岛香蕉船拖拽伞水上项目</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>99</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>环游记 泰国清迈Lila massage女子监狱spa 丽菈泰式按摩马杀鸡</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>199</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>899</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>1199</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>泰国芭提雅三合一日游芭提雅蒂芬妮人妖秀成人门票bigeye含接送</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>1589</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                --></ul>
                <div class="page_num_inf">
                    <i></i> 共
                    <span id="totalPage">12</span>页<span id="totalCount">132</span>条
                </div>
                <div class="pageNum">
                    <ul id="route">
                        <!--  <li><a href="">首页</a></li>
                          <li class="threeword"><a href="#">上一页</a></li>
                          <li><a href="#">1</a></li>
                          <li><a href="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li><a href="#">5</a></li>
                          <li><a href="#">6</a></li>
                          <li><a href="#">7</a></li>
                          <li><a href="#">8</a></li>
                          <li><a href="#">9</a></li>
                          <li><a href="#">10</a></li>
                          <li class="threeword"><a href="javascript:;">下一页</a></li>
                          <li class="threeword"><a href="javascript:;">末页</a></li>-->
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="top">
                    <div class="hot">HOT</div>
                    <span>热门推荐</span>
                </div>
                <ul>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--引入头部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<script src="js/getParameter.js"></script>
<script>
    $(function () {
        let cid = getParameter("cid");
        // alert(cid)
        let rname = getParameter("rname");

        //alert(rname)
        //%E5%85%B5%E9%A9%AC%E4%BF%91 乱码
        //判断rname如果不为null或者""
        if (rname) {
            //url 解码
            rname = window.decodeURIComponent(rname)
            //alert(rname)
        }
        load(cid, null, rname)
        //获取rname的参数值

    })

    function load(cid, currentPage, rname) {
        //发送Ajax请求,请求route/pageQuery,传递cid
        $.get("route/pageQuery", {cid: cid, currentPage: currentPage, rname: rname}, function (data) {
            //解析PageBean数据,展示到页面上
            //1.分页工具条数据展示
            //1.1 展示总页码和总记录数
            $("#totalCount").html(data.totalCount)
            $("#totalPage").html(data.totalPage)
            /*            <!--  <li><a href="">首页</a></li>
                        <li class="threeword"><a href="#">上一页</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li><a href="#">7</a></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>
                        <li><a href="#">10</a></li>
                        <li class="threeword"><a href="javascript:;">下一页</a></li>
                        <li class="threeword"><a href="javascript:;">末页</a></li>-->*/
            let lis = "";
            let firstPage = '<li  onclick="javascript:load(' + cid + ',' + 1 + ',' + rname + ')"><a href="javascript:void(0)">首页</a></li>';
            //计算上一页
            let beforeNum = data.currentPage - 1;
            if (beforeNum <= 0) {
                beforeNum = 1
            }
            let prePage = '<li class="threeword" onclick="javascript:load(' + cid + ',' + beforeNum + ',' + rname + ')"><a href="javascript:void(0)">上一页</a></li>';
            lis += firstPage;
            lis += prePage;

            //1.2 展示分页页码
            /*
                1.一共展示10个页码，能够达到前5后4的效果
                2.如果前边不够5个，后边补齐10个
                3.如果后边不足4个，前边补齐10个
            */
            let begin;
            let end;
            //1.要显示10个页码
            if (data.totalPage < 10) {
                //总页码不够十页
                begin = 1;
                end = data.totalPage;
            } else {
                begin = data.currentPage - 5
                end = data.currentPage + 4
                //2.如果前边不够5个，后边补齐10个
                if (begin < 1) {
                    begin = 1;
                    end = begin + 9;
                }

                //3.如果后边不足4个，前边补齐10个
                if (end > data.totalPage) {
                    end = data.totalPage;
                    begin = end - 9;
                }

            }
            let li
            for (let i = begin; i <= end; i++) {
                if (i == data.currentPage) {
                    li = '<li class="curPage" onclick="javascript:load(' + cid + ',' + i + ',' + rname + ')"><a href="javascript:void(0)">' + i + '</a></li>';
                } else {
                    li = '<li  onclick="javascript:load(' + cid + ',' + i + ',' + rname + ')"><a href="javascript:void(0)">' + i + '</a></li>'
                }
                //拼接字符串
                lis += li;
            }
            let lastPage = '<li class="threeword" onclick="javascript:load(' + cid + ',' + data.totalPage + ',' + rname + ')"><a href="javascript:void(0);">末页</a></li>';
            //计算下一页
            let afterNum = data.currentPage + 1;
            if (afterNum >= 0) {
                afterNum = data.totalPage
            }
            let nextPage = '<li class="threeword" onclick="javascript:load(' + cid + ',' + afterNum + ',' + rname + ')"><a href="javascript:void(0);">下一页</a></li>';
            lis += nextPage;
            lis += lastPage;
            $("#route").html(lis)


            /**
             * <li>
             <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
             <div class="text1">
             <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
             <br/>
             <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
             </div>
             <div class="price">
             <p class="price_num">
             <span>&yen;</span>
             <span>299</span>
             <span>起</span>
             </p>
             <p><a href="route_detail.html">查看详情</a></p>
             </div>
             </li>
             */
                //2.列表显示
            let route_lis = "";
            for (let i = 0; i < data.list.length; i++) {
                //获取list的值 { rid:1;rname :"xxx"}
                let route = data.list[i];
                let li = '<li>\n' +
                    '             <div class="img"><img src="' + route.rimage + '" alt="" style="width: 299px"></div>\n' +
                    '             <div class="text1">\n' +
                    '             <p>' + route.rname + '</p>\n' +
                    '             <br/>\n' +
                    '             <p>' + route.routeIntroduce + '</p>\n' +
                    '             </div>\n' +
                    '             <div class="price">\n' +
                    '             <p class="price_num">\n' +
                    '             <span>&yen;</span>\n' +
                    '             <span>' + route.price + '</span>\n' +
                    '             <span>起</span>\n' +
                    '             </p>\n' +
                    '             <p><a href="route_detail.html?rid=' + route.rid + '">查看详情</a></p>\n' +
                    '             </div>\n' +
                    '             </li>'
                route_lis += li
            }
            $("#_route").html(route_lis)
            //定位到页面顶部
            window.scrollTo(0, 0)
        })
    }

</script>
</body>

</html>